<template>
	<view class="card">
		<swiper class="cardSwiper" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
			<swiper-item v-for="(banner,index) in currentCategory.bannerUrlList" :key='index'>
				<view class="swiper-item">
					<image class="swiperImg" :src="banner"></image>
				</view>
			</swiper-item>
		</swiper>
		<view class="cardTitle">{{currentCategory.name}}</view>
		<view class="cardTitle">{{currentCategory.frontName}}</view>
		<view class="goodsList">
			<view  class="goodsItem" @click="toDetail(goods)" v-for="(goods,index) in currentCard.itemList" :key='goods.id'>
				<image class="goodsImg" :src="goods.primaryPicUrl"></image>
				<view class="goodsName">{{goods.name}}</view>
				<view class="goodsPrice">{{goods.counterPrice}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {mapState} from 'vuex'
	export default {
		name:'Card',
		props:['currentId'],
		
		mounted(){
			this.getCardList()
		},
		methods:{
			getCardList(){
				this.$store.dispatch('getCardList')
			},
			
			//点击去到详情页
			//goods是秋裤数据 数组
			toDetail(goods){
				//把数据存到storege 方便详情页面拿了展示
				wx.setStorageSync('goodsInfo_key',goods)
				wx.navigateTo({
					url:'/pages/detail/detail'
				})
			
			}
		},
		computed:{
			...mapState({
				cardList:state=>state.home.cardList
			}),
			currentCard(){
				return this.cardList.find(item=> this.currentId === item.category.parentId) || {}
			},
			currentCategory(){
				return this.currentCard.category || {}
			}
			
			
		}
	
	}
</script>

<style lang="stylus">
	.card
		.cardSwiper
			.swiperImg
				width 100%
				height 300rpx
		.cardTitle
			text-align center
		.goodsList
			display flex
			flex-wrap wrap
			justify-content space-around
			&::after
				display block
				content ''
				width 344rpx
			.goodsItem
				width 344rpx
				.goodsImg
					width 344rpx
					height 344rpx	
					
</style>
